import React, { useState, useEffect } from 'react';
import { Card, SegmentedControl, WhiteSpace, Flex, WingBlank, Icon } from 'antd-mobile';
import { Spin, Divider, Tooltip, Table } from 'antd';
import { connect } from 'dva';
import _ from 'lodash';
import FileBtn from '@/components/FileBtn';
import styles from './index.less';
import ValueOlive from './components/ValueOlive';
import DifferenceDetail from './components/DifferenceDetail';
import * as utils from './utils';

const ApproveMobile = props => {
  utils.createDom();
  const { items, dispatch, location } = props;
  const { basicInfo, versionReporting, tabs, tableDate2, expandedRowKeys } = items;
  const [tabKey, setTabKey] = useState('');
  const [tabs1key, setTabs1key] = useState(0);
  const [loading, setLoading] = useState(true);
  /* 设置容器的高度 */
  const setDomeHeight = num => {
    if (window.cifioa) {
      window.cifioa.sendMessage({
        type: 'height',
        height: num,
      });
    }
  };
  useEffect(() => {
    setDomeHeight(150);
    const params = {
      businessKey: location.query.id,
      projectId: '',
    };
    dispatch({
      type: 'ApproveMobile/basicInfo',
      payload: { params },
      callback: () => {
        dispatch({
          type: 'ApproveMobile/versionReporting',
          payload: { params },
          callback: () => {
            dispatch({
              type: 'ApproveMobile/valueOlive',
              payload: { params },
              callback: response => {
                if (response.code === 1) {
                  setLoading(!loading);
                  const appRoveMobile = document.getElementById('appRoveMobile');
                  setDomeHeight(appRoveMobile.offsetHeight - 10);
                }
              },
            });
          },
        });
      },
    });
  }, []);

  useEffect(() => {
    if (!_.isEmpty(tabs)) {
      setTabKey(tabs[0].key);
    }
  }, [tabs]);

  useEffect(() => {
    if (tabKey !== '' && tabs1key === 1) {
      dispatch({
        type: 'ApproveMobile/allgoodsValueDetail',
        payload: {
          params: {
            businessKey: location.query.id,
            type: tabKey,
          },
        },
        callback: () => {
          const appRoveMobile = document.getElementById('appRoveMobile');
          setDomeHeight(appRoveMobile.offsetHeight - 10);
        },
      });
    }
  }, [tabKey, tabs1key]);

  // // 实时修改dom高度
  useEffect(() => {
    const appRoveMobile = document.getElementById('appRoveMobile');
    setDomeHeight(appRoveMobile.offsetHeight + 83);
  }, [tabs1key]);

  const table2 = () => {
    if (tableDate2.length > 0) {
      return (
        <DifferenceDetail
          allgoodsValueDetail={tableDate2}
          expandedRowKeys={expandedRowKeys}
          name={_.filter(tabs, x => x.key === tabKey)[0].title}
        />
      );
    }
    return (
      <Table
        columns={[]}
        dataSource={[]}
        loading
        bordered
        size="middle"
        pagination={false}
        scroll={{ y: 300 }}
      />
    );
  };

  return (
    <div className={styles['app-rove-mobile']}>
      {/* 加载 */}
      <div style={{ height: loading ? '150px' : '0px', background: '#fff' }}>
        <WingBlank>
          <div
            style={{
              position: 'absolute',
              top: '50%',
              left: '50%',
              transform: 'translate(-50%,-50%)',
            }}
          >
            {loading ? <Icon type="loading" size="lg" /> : null}
          </div>
        </WingBlank>
      </div>
      {/* 内容 */}
      <div id="appRoveMobile">
        {!loading ? (
          <>
            <Card full style={{ marginTop: '-10px' }}>
              {/* 基本信息 */}
              <WhiteSpace />
              <WingBlank>
                <div className="title">基本信息</div>
                <WhiteSpace />
                <Flex justify="between">
                  <Tooltip
                    placement="topLeft"
                    title={`${basicInfo.projectName}(${basicInfo.projectCode})` || '无'}
                  >
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                      <span className="ellipsis font2">
                        <span className="font1">项目：</span>
                        {`${basicInfo.projectName}（${basicInfo.projectCode}）` || '无'}
                      </span>
                    </div>
                  </Tooltip>
                </Flex>
                <Flex justify="between">
                  <div style={{ display: 'flex', alignItems: 'center' }}>
                    <span className="font1">区域：</span>
                    <span className="font2">{basicInfo.area || '无'}</span>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center' }}>
                    <span className="font1">权益比例：</span>
                    <span className="font2">{`${basicInfo.quityRatio * 1} %`}</span>
                  </div>
                </Flex>
              </WingBlank>
              <WhiteSpace />
              <Divider />
              {/* 本次编排版本 */}
              <WhiteSpace />
              <WingBlank>
                <div className="title">本次填报版本</div>
                <WhiteSpace />
                {versionReporting.map((v, i) => (
                  <div style={{ display: 'flex', alignItems: 'center' }} key={i}>
                    <WhiteSpace />
                    <span className="font1">{v.name}：</span>
                    <span className="font2">{v.value}</span>
                  </div>
                ))}
              </WingBlank>
              <WhiteSpace />
              <Divider />
              {/* 审批要点说明 */}
              <WhiteSpace />
              <WingBlank>
                <div className="title">审批要点说明</div>
                <WhiteSpace />
                <div className="font2">{basicInfo.description}</div>
              </WingBlank>
              <WhiteSpace />
              {basicInfo.files && !_.isEmpty(basicInfo.files) ? <Divider /> : null}{' '}
              {/* 如果附件不为空加分割线 */}
              {/* 附件 附件为空则不显示 */}
              {basicInfo.files && !_.isEmpty(basicInfo.files) ? (
                <>
                  <WhiteSpace />
                  <WingBlank>
                    <div className="title">附件</div>
                    {basicInfo.files.map(v => (
                      <FileBtn
                        fileId={v.fileId}
                        fileName={v.fileName}
                        clickType="btnClick"
                        titleNmae
                        key={v.fileId}
                        download={true}
                      />
                    ))}
                  </WingBlank>
                  <WhiteSpace />
                </>
              ) : null}
            </Card>
            <WhiteSpace />
            {/* 表格部分 */}
            <Card full>
              <WhiteSpace />
              <WingBlank>
                <div className="title">全盘货值差异</div>
              </WingBlank>
              <div className="xh-approve-tabs">
                {tabs.map(v => (
                  <div className="xh-approve-tabs-default-tab" key={v.key}>
                    <div
                      onClick={() => setTabKey(v.key)}
                      style={{
                        color: tabKey === v.key ? '#2761FF' : 'rgba(153, 153, 153, 1)',
                      }}
                      className="xh-approve-tabs-default-tab-text"
                    >
                      <span>{v.title}</span>
                      <div
                        className="xh-approve-tabs-default-tab-active"
                        style={{ background: tabKey === v.key ? '#2761FF' : '#e6e6e6' }}
                      ></div>
                    </div>
                  </div>
                ))}
              </div>
              <div>
                <WhiteSpace />
                <WhiteSpace />
                <WingBlank>
                  <Flex justify="center">
                    <SegmentedControl
                      selectedIndex={tabs1key}
                      style={{ height: '30px', width: '224px' }}
                      values={['全盘差异概览', '全盘差异详情']}
                      onChange={e => setTabs1key(e.nativeEvent.selectedSegmentIndex)}
                    />
                  </Flex>
                  <WhiteSpace />
                  <WhiteSpace />
                  {tabs1key !== 1 ? (
                    <>
                      <span className="font1">
                        货值:万元、均价:元/平米(个)、面积:平米、套数:套、车位数:个
                      </span>
                      <WhiteSpace />
                      <ValueOlive items={items} tabKey={tabKey} />
                    </>
                  ) : (
                    table2()
                  )}
                  <WhiteSpace />
                </WingBlank>
              </div>
            </Card>
          </>
        ) : null}
      </div>
    </div>
  );
};

export default connect(state => ({
  items: state.ApproveMobile,
}))(ApproveMobile);
// // http://localhost:8000/#/common/approveMobile?id=83753036d2d24664a813ca6c2197a35b
